<!--
 * @Date: 2020-09-14 11:05:30
 * @LastEditors: 小枫
 * @LastEditTime: 2020-09-19 08:43:52
 * @FilePath: \feng-blog\src\views\ArticleDetail.vue
-->
<template lang="pug">
  .detail
    detail-header(:title="article.title")
    .info
      .time
        i.el-icon-time  {{article.createAt | formatDate}}
      .author
        i.el-icon-user  {{article.username}}
      .class
        el-tag(v-if="article.tag") {{article.tag}}
        b(v-else) 无分类
    .divider
      el-divider(style="width: 50%;")
    .markdown-body(v-html="article.content")
    el-divider
    review-List(:reviewList="reviews", :topic_id="aid")
</template>

<script>
import DetailHeader from '../components/DetailHeader'
import ReviewList from '../components/ReviewList';
  export default {
    props: {
      aid: Number
    },
    components: {
      DetailHeader,
      ReviewList
    },
    data() {
      return {
        article: {},
        reviews: []
      }
    },
    methods: {
      getDetail() {
        this.$http.get(`/articles/${this.aid}`).then(
          res => {
            if(res) {
              this.article = res.data.data[0]
            }
          }
        )
      },
      getReviews() {
        this.$http.get(`/reviews/${this.aid}`).then(
          res => {
            if(res) {
              this.reviews = res.data.data
            }
          }
        )
      }
    },
    created() {
      this.getDetail()
      this.getReviews()
    }
  }
</script>

<style lang="less" scoped>
.detail {
  width: 60%;
  margin: 0 auto;
  height: 100%;
  .info {
    display: flex;
    color: #777;
    .time {
      flex: 1;
    }
    .author {
      flex: 1;
    }
    .class {
      flex: 1;
    }
  }
  .divider {
    width: 85%;
    margin: 0 auto;
  }
  .markdown-body {
    padding: 0 10px;
    text-align: left;
  }
  @media screen and (max-width: 780px) {
    width: 100%;
    .divider {
      width: 100%;
    }
  }
}
</style>